<template>
  <div>
    <a-select
      show-search
      option-filter-prop="children"
      :filter-option="filterOption"
      :placeholder="placeholder"
      :allow-clear="clear"
      :mode="mode"
      :disabled="disabled"
      :maxTagCount="maxTagCount"
      v-model="selectedValue"
      :getPopupContainer="getPopupContainerWrapper"
      @search="getData"
      @dropdownVisibleChange="(val) => {
        if(val){
          getData()
        }
      }"
    >
      <a-spin v-if="fetching" slot="notFoundContent" size="small" />
      <a-select-option
        v-for="item in options"
        :key="item.ecuModuleId"
        :value="item.ecuModuleId"
        :title="`${item.name}/${item.ecuModuleId}`"
      >{{ `${item.name}/${item.ecuModuleId}` }}</a-select-option>
    </a-select>
  </div>
</template>
<script>
  // 所有车型(车型代码、车型名称)列表
  import PackageTypeSelect from './PackageTypeSelect.vue';
  import lodash from 'lodash'

  export default {
    components: {
      PackageTypeSelect
    },
    props: {
      modelIds:{
        type: String,
        default: ''
      },
      placeholder:{
        type: String,
        default: '请选择'
      },
      mode: {
        type: String,
        default: 'default'
      },
      defaultValue: {
        type: [String, Array, Object, undefined],
        default () {
          return undefined
        }
      },
      clear: {
        type: Boolean,
        default: false
      },
      maxTagCount: {
        type: Number,
        default: 3
      },
      disabled: {
        type: Boolean,
        default: false
      },
      /**
       * 已选中数据，用于未加载数据时展示
       */
      defaultData: {
        type: [String, Array, Object, undefined],
        default () {
          return undefined
        }
      },
      lazyLoad:{
        type: Boolean,
        default: false
      },
      clearOptions:{
        type: Boolean,
        default: false
      }
    },
    model: {
      prop: "defaultValue", //绑定的值，通过父组件传递
      event: "change" //自定义事件名
    },
    computed: {
      selectedValue:{
        get() {
          return this.defaultValue;
        },
        set(val) {
          this.$emit('change', val);    // 触发
          this.changeOption(val)
        }
      }
    },
    data () {
      return {
        options: [],
        fetching: false,
        packageType:this.packageStrategy
      }
    },
    watch: {
      'query.time': {
        handler (v, o) {
          // this.getData()
        },
        immediate: true
      },
      ecuModuleId(val, old) {
        if (old) {
          this.selectedValue = undefined;
        }
        if (!this.lazyLoad && this.options.length === 0) {
          this.getData();
        }
      },
    },
    created () {
      if (this.defaultData) {
        this.options = this.defaultData instanceof Array ? this.defaultData : [this.defaultData];
      }else if (!this.lazyLoad) {
        this.getData();
      }
    },
    methods: {
      getPopupContainerWrapper (triggerNode) {
        if (this.getPopupContainer) {
          return this.getPopupContainer(triggerNode);
        }
        if (!this.appendToBody && triggerNode) {
          return triggerNode.parentNode
        } else {
          return window.document.body
        }
      },
      getData:lodash.debounce(function(value = '') {
        if(this.clearOptions){
          return
        }
        this.fetching = true;
        let api = 'getAllEcu'
        let params = { modelIds: this.modelIds, name: value };
        this.$api[api](params)
        .then(response => {
          this.options = response.data || []
          this.fetching = false;
        });
      }, 500),
      changeOption (val) {
        if (val instanceof Array) {
          let selectedItems = val.map((item) => {
            return this.options.find(e => e.ecuModuleId === item);
          });
          this.$emit('changeOption', val, selectedItems)
          return;
        }
        let item = this.options.find(e => e.ecuModuleId === val);
        this.$emit('changeOption', val, item)
      },
      filterOption (input, option) {
        return (
          option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
        )
      }
    }
  }
</script>
